<template>
	<view>
		<view class="avatar-top">
			<view class="avatar_info">
				<view class="photo">
					<image v-if="isAuth" :src="userInfo.avatarImgSrc" mode=""></image>
					<uni-icons v-else customPrefix="iconfont" type="icon-touxiang" color="gray" size="72"></uni-icons>
				</view>
				<view class="login">
					<text v-if="isAuth">{{userInfo.username}}</text>
					<text v-else @click="handleLogin">点击登录</text>
				</view>
			</view>
		</view>
		<uni-list>
			<uni-list-item show-extra-icon showArrow :extra-icon="{color: '#4cd964',size: '22',type: 'shop-filled'}"
				title="订单管理" />
			<uni-list-item show-extra-icon showArrow to="/pages/avatar/address"
				:extra-icon="{color: '#4cd964',size: '22',type: 'location-filled'}" title="地址管理" />
			<uni-list-item show-extra-icon showArrow to="/pages/avatar/collect"
				:extra-icon="{color: '#27d9d9',size: '22',type: 'star-filled'}" title="我的收藏" />
			<uni-list-item @click="handleToSetting" clickable show-extra-icon showArrow
				:extra-icon="{color: '#d9ba47',size: '22',type: 'gear-filled'}" title="设置" />
		</uni-list>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {};
		},
		computed: {
			...mapState('login', ['isAuth', 'userInfo'])
		},
		methods: {
			handleLogin() {
				if (!this.isAuth) {
					uni.navigateTo({
						url: '/pages/avatar/login'
					})
				}
			},
			handleToSetting() {
				console.log(111)
				uni.navigateTo({
					url: '/pages/avatar/setting'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.avatar-top {
		width: 750rpx;
		height: 400rpx;
		background: linear-gradient(to bottom, #6aef2c, #c7fe88);
		border-radius: 0 0 30rpx 30rpx;

		.avatar_info {
			width: 650rpx;
			position: absolute;
			top: 180rpx;
			left: 100rpx;

			.photo {
				position: absolute;
				width: 150rpx;
				height: 150rpx;
				line-height: 150rpx;
				border-radius: 50%;
				border: 1px solid #6aef2c;
				background-color: #c7fe88;
				text-align: center;

				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
				}
			}

			.login {
				position: absolute;
				left: 180rpx;
				top: 50rpx;
				font-size: 42rpx;
				color: #fafff3
			}
		}
	}
</style>